<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<div class="search">
				<div class="search-fixed-top" ref="fixedBox">
					<div class="search-box" >
						<input v-model="businessName" placeholder="搜索饿了么商家、商品名称">
						<div class="button-mapper">
							<button @click="mapper">搜索</button>
						</div>
					</div>
				</div>
			</div>
		</header>
		
		<!-- 商家列表部分 -->
		<ul class="business">
			<li v-for="item in businessArr" @click="toBusinessInfo(item.businessId)">
				<div class="business-img">
					<img :src="item.businessImg">
					<div class="business-img-quantity" v-show="item.quantity>0">
						{{item.quantity}}
					</div>
				</div>
				<div class="business-info">
					<h3>{{item.businessName}}</h3>
					<p>&#165;{{item.starPrice}}起送 | &#165;{{item.deliveryPrice}}配送</p>
					<p>{{item.businessExplain}}</p>
				</div>
			</li>
		</ul>
		
		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';
	
	export default {
		name:'Mapper',
		
		data(){
			return {
				bname: '',
				businessArr: []
			}
		},
		
		created(){
			this.$axios.post('BusinessController/listBusiness', this.$qs.stringify({
				businessName: this.businessName
			})).then(response => {
				this.businessArr = response.data;
			}).catch(error => {
				console.error(error);
			});
		},
		components: {
			Footer
		},
		methods: {
			mapper(){
				if (this.businessName == '') {
					alert('搜索不能为空！');
					return;
				}
				
				this.$axios.post('BusinessController/listBusiness', this.$qs.stringify({
					businessName: this.businessName
				})).then(response => {
					this.businessArr = response.data;
				}).catch(error => {
					console.error(error);
				});
			},
			toBusinessInfo(businessId) {
				this.$router.push({
					path: '/businessInfo',
					query: {
						businessId: businessId
					}
				});
			}
		},
	}
</script>

<style scoped>
	/****************** search ******************/
	.wrapper .search {
		width: 100%;
		height: 13vw;
		
		z-index: 1000;
		
		position: fixed;
		left: 0;
		top: 0;
	}

	.wrapper .search .search-fixed-top {
		width: 100%;
		height: 13vw;
		background-color: #0097FF;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .search .search-fixed-top .search-box {
		width: 90%;
		height: 9vw;
		background-color: #fff;
		border-radius: 2px;
		
		display: flex;
		justify-content: center;
		align-items: center;

	}
	.wrapper .search .search-fixed-top .search-box input{
		width: 100%;
		height: 8vw;
		
		font-size: 3.5vw;
		color: #AEAEAE;
		font-family: "宋体";
		
		border: 0;
	}
	.wrapper .search .search-fixed-top .search-box button{
		width: 9vw;
		height: 9vw;
		
		border: 0;
	}
	
	/****************** 商家列表部分 ******************/
	.wrapper .business {
		width: 100%;
		padding-top: 13vw;
		padding-bottom: 14vw;
	}
	
	.wrapper .business li {
		width: 100%;
		box-sizing: border-box;
		padding: 2.5vw;
		border-bottom: solid 1px #DDD;
		user-select: none;
		cursor: pointer;
		display: flex;
		align-items: center;
	}
	
	.wrapper .business li .business-img {
		/*这里设置为相当定位，成为business-img-quantity元素的父元素*/
		position: relative;
	}
	
	.wrapper .business li .business-img img {
		width: 20vw;
		height: 20vw;
	}
	
	.wrapper .business li .business-img .business-img-quantity {
		width: 5vw;
		height: 5vw;
		background-color: red;
		color: #fff;
		font-size: 3.6vw;
		border-radius: 2.5vw;
		display: flex;
		justify-content: center;
		align-items: center;
		/*设置成绝对定位，不占文档流空间*/
		position: absolute;
		right: -1.5vw;
		top: -1.5vw;
	}
	
	.wrapper .business li .business-info {
		margin-left: 3vw;
	}
	
	.wrapper .business li .business-info h3 {
		font-size: 3.8vw;
		color: #555;
	}
	
	.wrapper .business li .business-info p {
		font-size: 3vw;
		color: #888;
		margin-top: 2vw;
	}
</style>